//虎牙视频总排行榜（功能19）

<template>
  <div>
    <blockquote>数据截止至2021年8月18日晚上7:00</blockquote>
    <!-- .slice((currentPage-1)*pageSize,currentPage*pageSize) -->
    <h1>虎牙视频总排行榜</h1>
    <el-row>
      <el-button
        @click="handleAdd()"
        size="mini"
        style="margin-bottom: 15px; float: left;"
        >添加数据</el-button
      >
    </el-row>
    <el-row>
      <el-input
        @input="changeTotal()"
        type="text"
        v-model="search"
        size="mini"
        placeholder="搜索标题或者作者"
        style="width: 500px; float: left;"
      />
    </el-row>
    <el-table
      :data="
        video
          .filter(
            (data) =>
              !search ||
              data.nick.includes(search) ||
              data.title.includes(search)
          )
          .slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      style="width: 96%"
    >
      <el-table-column label="标题" prop="title"> </el-table-column>
      <el-table-column label="作者名" prop="nick"> </el-table-column>
      <el-table-column label="播放量" prop="viewCount"> </el-table-column>
      <el-table-column label="综合评分" prop="score"> </el-table-column>

      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <!-- <el-button @click="handleAdd()" size="mini">添加数据</el-button>
          <el-input
            type="text"
            v-model="search"
            size="mini"
            placeholder="搜索标题或者作者"
          /> -->
        </template>

        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="totalCount"
    ></el-pagination>

    <!-- 修改的对话框 -->
    <template>
      <el-dialog title="修改数据" :visible.sync="editDialogue" width="30%">
        <el-form label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="changeData.title"></el-input>
          </el-form-item>
          <el-form-item label="作者名">
            <el-input v-model="changeData.nick"></el-input>
          </el-form-item>
          <el-form-item label="播放量">
            <el-input v-model="changeData.viewCount" type="number"></el-input>
          </el-form-item>
          <el-form-item label="综合评分">
            <el-input v-model="changeData.score" type="number"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleEditCancle()">取消</el-button>
          <el-button type="primary" @click="handleEditSure()">确定</el-button>
        </span>
      </el-dialog>
    </template>

    <!-- 添加的对话框 -->
    <template>
      <el-dialog title="添加数据" :visible.sync="addDialogue" width="30%">
        <el-form label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="changeData.title"></el-input>
          </el-form-item>
          <el-form-item label="作者名">
            <el-input v-model="changeData.nick"></el-input>
          </el-form-item>
          <el-form-item label="播放量">
            <el-input v-model="changeData.viewCount" type="number"></el-input>
          </el-form-item>
          <el-form-item label="综合评分">
            <el-input v-model="changeData.score" type="number"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleAddCancle()">取 消</el-button>
          <el-button type="primary" @click="handleAddSure()">确定</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import stores from "@/store";
export default {
  data() {
    return {
      search: "",
      //分页的参数
      currentPage: 1, //默认第几页
      totalCount: 30, //总条数
      pageSize: 7, //每页数量
      video: [
        {
          nick: "",
          title: "",
        },
      ],

      //修改的数据（增加/修改）
      changeData: {
        title: "",
        nick: "",
        viewCount: "",
        score: "",
        id: "",
      },
      deleteId: "", //删除的数据的id
      editDialogue: false, //修改对话框的显示
      addDialogue: false, //添加
    };
  },
  methods: {
    changeTotal(){
      // console.log(this.video.filter(
      //       (data) =>
      //         !this.search ||
      //         data.nick.includes(this.search) ||
      //         data.title.includes(this.search)
      //     ).length)
          this.totalCount=this.video.filter(
            (data) =>
              !this.search ||
              data.nick.includes(this.search) ||
              data.title.includes(this.search)
          ).length
    },
    handleEdit(index, row) {
      this.changeData.title = row.title;
      this.changeData.nick = row.nick;
      this.changeData.viewCount = row.viewCount;
      this.changeData.score = row.score;
      this.changeData.id = row.id;
      console.log(this.changeData);
      this.editDialogue = true;
    },

    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get(stores.spring_url + "/video/rankOfVideo/delete", {
              params: { id: row.id },
            })
            .then((res) => {
              this.$router.go(0); //刷新页面
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleAdd(index, row) {
      this.addDialogue = true;
    },

    handleEditCancle() {
      this.editDialogue = false;
      //清零
      (this.changeData.title = ""),
        (this.changeData.nick = ""),
        (this.changeData.viewCount = ""),
        (this.changeData.score = ""),
        (this.changeData.id = "");
    },
    handleAddCancle() {
      this.addDialogue = false;
      //清零
      (this.changeData.title = ""),
        (this.changeData.nick = ""),
        (this.changeData.viewCount = ""),
        (this.changeData.score = ""),
        (this.changeData.id = "");
    },
    handleEditSure() {
      if(this.changeData.title==''){
        this.$alert("请输入标题","提示" ,{ confirmButtonText: "我知道了" });           
      }
      else if(this.changeData.nick==''){
        this.$alert("请输入作者名","提示" ,{ confirmButtonText: "我知道了" });           
      } 
      else if(this.changeData.viewCount==''){
        this.$alert("请输入播放量","提示" ,{ confirmButtonText: "我知道了" });           
      }       
      else if(this.changeData.score==''){
        this.$alert("请输入综合评分","提示" ,{ confirmButtonText: "我知道了" });           
      }   
      else if(this.changeData.viewCount<0){
        this.$alert("播放量不能小于0","提示" ,{ confirmButtonText: "我知道了" });          
      }
      else if(this.changeData.score<0){
        this.$alert("综合评分不能小于0","提示" ,{ confirmButtonText: "我知道了" });          
      }      
      else{
        //console.log("success")
        this.$confirm("确定保存?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$axios
              .post(
                stores.spring_url + "/video/rankOfVideo/edit",
                this.changeData
              )
              .then((res) => {
                console.log("success");
                this.$router.go(0); //刷新页面
              });
          })
          .catch(() => {});      
      }    

    },
    handleAddSure() {
      if(this.changeData.title==''){
        this.$alert("请输入标题","提示" ,{ confirmButtonText: "我知道了" });           
      }
      else if(this.changeData.nick==''){
        this.$alert("请输入作者名","提示" ,{ confirmButtonText: "我知道了" });           
      } 
      else if(this.changeData.viewCount==''){
        this.$alert("请输入播放量","提示" ,{ confirmButtonText: "我知道了" });           
      }       
      else if(this.changeData.score==''){
        this.$alert("请输入综合评分","提示" ,{ confirmButtonText: "我知道了" });           
      }   
      else if(this.changeData.viewCount<0){
        this.$alert("播放量不能小于0","提示" ,{ confirmButtonText: "我知道了" });          
      }
      else if(this.changeData.score<0){
        this.$alert("综合评分不能小于0","提示" ,{ confirmButtonText: "我知道了" });          
      }      
      else{
        console.log("success")
        this.$confirm("确定添加?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$axios
              .post(stores.spring_url + "/video/rankOfVideo/add", this.changeData)
              .then((res) => {
                console.log("success");
                this.$router.go(0); //刷新页面
              });
          })
          .catch(() => {});        
      } 

    },

    handleCurrentChange(page) {
      this.currentPage = page;
    },
  },

  mounted() {
    this.$axios
      .post(stores.spring_url + "/video/rankOfVideo", "function19")
      .then((res) => {
        this.video = res.data.video;
        this.totalCount = this.video.length;
      });
  },
};
</script>
<style>
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    font-size: 12px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    background: #fde2e2;
    border: 1px solid #F56C6C;
    padding-left: 15px;
    color :#F55151;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
}
</style>